import editForm from "../form.vue";
import { message } from "@/utils/message";
import { queryProduceTaskList } from "@/api/exam";
import { addDialog, closeDialog } from "@/components/ReDialog";
import { type FormItemProps } from "../utils/types";
import { type PaginationProps } from "@pureadmin/table";
import { reactive, ref, onMounted, h } from "vue";

export function useRole() {
  const searchForm = reactive({
    name: "",
    del: "0"
  });
  const formRef = ref();
  const dataList = ref([]);
  const loading = ref(true);
  const pagination = reactive<PaginationProps>({
    total: 0,
    pageSize: 10,
    currentPage: 1,
    background: true
  });
  const columns: TableColumnList = [
    {
      label: "任务名称",
      prop: "name",
      minWidth: 140
    },
    {
      label: "考试开始时间",
      prop: "starttime",
      minWidth: 130
    },
    {
      label: "禁止入场时间",
      prop: "endtime",
      minWidth: 130
    },
    {
      label: "试卷名称",
      prop: "paperName",
      minWidth: 140
    },
    {
      label: "试卷类型",
      prop: "paperType",
      minWidth: 80,
      formatter: row => {
        switch (row.paperType) {
          case 0:
            return "固定题型";
          case 1:
            return "随机题型";
        }
      }
    },
    {
      label: "考试时长",
      prop: "paperTimes",
      minWidth: 80,
      formatter: row => {
        return `${row.paperTimes}(分钟)`;
      }
    },
    {
      label: "试卷分数",
      prop: "paperScore",
      minWidth: 80,
      formatter: row => {
        return `${row.paperScore}分`;
      }
    },
    {
      label: "操作",
      fixed: "right",
      width: 150,
      slot: "operation"
    }
  ];

  function handleSizeChange(val: number) {
    console.log(`${val} items per page`);
  }

  function handleCurrentChange(val: number) {
    console.log(`current page: ${val}`);
    onSearch();
  }

  function handleSelectionChange(val) {
    console.log("handleSelectionChange", val);
  }

  async function onSearch() {
    loading.value = true;
    queryProduceTaskList({
      name: searchForm.name,
      del: searchForm.del,
      pageSize: pagination.pageSize,
      currentPage: pagination.currentPage
    })
      .then(res => {
        if (res.success) {
          dataList.value = res.data.list;
          pagination.total = res.data.total;
          loading.value = false;
        } else {
          message("查询数据异常:" + res.errMsg, { type: "error" });
        }
      })
      .catch(error => {
        message("查询数据异常:" + JSON.stringify(error), { type: "error" });
      });
  }

  const resetForm = formEl => {
    if (!formEl) return;
    formEl.resetFields();
    onSearch();
  };

  function openDialog(title = "实时监控", row?: FormItemProps) {
    addDialog({
      title: `${title}`,
      props: {
        formInline: {
          id: row?.id ?? "",
          creater: row?.creater ?? "",
          name: row?.name ?? "",
          paperid: row?.paperid ?? "",
          paperName: row?.paperName ?? "",
          starttime: row?.starttime ?? "",
          endtime: row?.endtime ?? "",
          del: row?.del ?? 0,
          description: row?.description ?? "",
          addtime: row?.addtime ?? "",
          updatetime: row?.updatetime ?? ""
        }
      },
      width: "40%",
      draggable: true,
      fullscreen: true,
      showClose: false,
      closeOnClickModal: false,
      closeOnPressEscape: false,
      headerRenderer: ({ titleId, titleClass }) => (
        // jsx 语法
        <div class="flex flex-row justify-between">
          <h4 id={titleId} class={titleClass}>
            任务名称：{row.paperName}
          </h4>
          <el-button type="danger" onClick={closeDialog}>
            关闭
          </el-button>
        </div>
      ),
      hideFooter: true,
      contentRenderer: () => h(editForm, { ref: formRef })
    });
  }

  onMounted(() => {
    onSearch();
  });

  return {
    searchForm,
    loading,
    columns,
    dataList,
    pagination,
    onSearch,
    resetForm,
    openDialog,
    handleSizeChange,
    handleCurrentChange,
    handleSelectionChange
  };
}
